<template>
  <div class="top">
    <!-- 切换 销量 和 销量额 的 单选按钮 -->
    <el-radio-group v-model="radioVal" size="large" @change="drowPie">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销量额</el-radio-button>
    </el-radio-group>
    <!-- 切换 今天 昨天 ... 的 Select选择器 -->
    <el-select v-model="selectVal" class="m-2" placeholder="请选择" size="large" @change="drowPie">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
  <!-- 第二步 : 提供显示图标的容器  dom元素 -->
  <!-- 放 饼图的 dom元素 -->
  <div id="main" style="width:100%;height:400px;border-bottom:2px solid #f0f0f0"></div>

  <!-- 放 地图的 dom元素 -->
  <div id="mainMap" style="width:100%;height:450px"></div>
</template>

<script setup lang="ts">
// 第一步 : 引入 echarts
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
// 导入 中国地图的JSON文件
import china from '@/json/china.json';

import * as http from '@/request/http';
import { onMounted, ref } from 'vue';

echarts.registerMap('China', china as any);   // 注册地图数据


const radioVal = ref('sale_');
const selectVal = ref('yesterday');
const options = [
  { label: '昨天', value: 'yesterday' },
  { label: '今天', value: 'today' },
  { label: '前3天', value: 'three_days' },
  { label: '前7天', value: 'seven_days' },
  { label: '前30天', value: 'thirty_days' },
  { label: '前60天', value: 'sixty_days' },
]

let salePieData: ISalePie[] = [];  // 饼图数据
let saleMapData: ISaleMap[] = [];  // 地图数据

let myChart: echarts.ECharts;  // 饼图
let myChartChina: echarts.ECharts;  // 地图

onMounted(() => {
  // 第三步 : 初始化图表

  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('main')!);   // ! 非空断言  告诉ts 不是空的
  myChartChina = echarts.init(document.getElementById('mainMap')!);

  // 发起请求
  http.chart.getStat().then(res => {
    console.log('图表的数据 : ', res);

    salePieData = res.data.salePie;
    saleMapData = res.data.saleMap;

    // 
    drowPie();
    // 
    drowMap();
  })
})


const drowPie = () => {
  // 获取当前需要显示的属性名key
  let key = radioVal.value == 'sale_' ? radioVal.value + selectVal.value : selectVal.value + radioVal.value;
  // 处理饼图data数据
  const data: any = salePieData.map(item => {
    return {
      name: item.name,
      value: item[key],
    }
  })

  // 指定图表的配置项和数据
  const option: EChartsOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'right',
      width: '300px',  // 图例宽度
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['30%', '50%'],   // 饼图位置  1水平  2垂直
        data
      }
    ]
  };

  // 绘制 饼图   
  myChart.setOption(option);
}

const drowMap = () => {
  // 处理地图数据
  const dataMap: any = saleMapData.map(item => {
    return {
      name: item.areaName,
      value: item.saleNum,
    }
  })

  // 地图 的 配置项和数据
  const optionMap = {
    title: {
      text: '全国销量分布图',
      right: 'center',
      top: '5%'
    },
    // 鼠标移上去出来的提示  
    tooltip: {
      trigger: 'item',
      formatter: '{b0}<br />销量:  {c0}',
      backgroundColor: 'rgba(0,0,0,.6)',
      borderColor: 'rgba(0,0,0,.6)',
      textStyle: {
        color: '#fff',
      }
    },
    // 右边的 工具栏(数据视图,还原,下载)
    // toolbox: {
    //   show: true,
    //   orient: 'vertical',
    //   left: 'right',
    //   top: 'center',
    //   feature: {
    //     dataView: { readOnly: false },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    // 左下角的 
    visualMap: {
      min: 10000,
      max: 1000000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['#feebe9', '#fd5c2e', '#ff4806']
      }
    },
    // 数据配置
    series: [
      {
        name: '全国销量分布图',
        type: 'map',
        map: 'China',
        label: {
          show: false
        },
        data: dataMap,
        // 自定义名称映射
        nameMap: {
          // 方式二 : 通过自定义名称映射  ===>  json数据名称 : 返回数据名称
          'Kowloon City': '九龙城',
          'Kwun Tong': '观塘',
          'Sai Kung': '西贡',
          'Sha Tin': '沙田',
          'Sham Shui Po': '深水埗',
        }
      }
    ]
  }

  // 绘制  地图
  myChartChina.setOption(optionMap);
}


</script>

<style scoped lang="less">
.top {
  display: flex;
  justify-content: space-between;
}
</style>